<template>
	<view>
		<!-- 用户信息开始 -->
		<view class="user_info">
			<view class="user_icon">
				<image :src="imgDetail.user.avatar" mode="widthFix"></image>
			</view>
			<view class="user_desc">
				<view class="user_name">{{imgDetail.user.name}}</view>
				<view class="user_time">{{imgDetail.cnTime}}</view>
			</view>
		</view>
		<!-- 用户信息结束 -->
		<!-- 高清大图开始 -->
		<view class="high_img">
			<swiper-action @swiperAction="handleSwiperAction">
				<image :src="imgDetail.newThumb" mode="widthFix"></image>
			</swiper-action>

		</view>
		<!-- 高清大图结束 -->

		<!-- 点赞开始 -->
		<view class="user_rank">
			<view class="rank">
				<text class="iconfont icondianzan"> {{ imgDetail.rank }} </text>
			</view>
			<view class="user_collect">
				<text class="iconfont iconshoucang">收藏</text>
			</view>
		</view>
		<!-- 点赞结束 -->

		<!-- 专辑开始 -->
		<view class="album_wrap" v-if="album.length">
			<view class="album_title">相关</view>
			<view class="album_list">
				<view class="album_item" v-for="item in album" :key="item.id">
					<view class="album_cover">
						<image :src="item.cover" mode="aspectFill"></image>
					</view>
					<view class="album_info">
						<view class="album_info_text">专辑</view>
						<view class="album_name"> {{ item.name }} </view>
						<text class="iconfont iconiconfontjiantou4"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 专辑结束 -->
		<!-- 热评开始 -->
		<view class="comment hot" v-if="hot.length">
			<view class="comment_title">
				<text class="iconfont iconhot1"></text>
				<text class="comment_text">最热评论</text>
			</view>
			<view class="comment_list">
				<view class="comment_item" v-for="item in hot" :key="item.id">
					<!-- 用户信息 -->
					<view class="comment_user">
						<!-- 头像 -->
						<view class="user_icon">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
						<!-- 名称 -->
						<view class="user_name">
							<view class="user_nickname"> {{ item.user.name }} </view>
							<view class="user_time"> {{ item.cnTime }} </view>
						</view>
						<!-- 徽章 -->
						<view class="user_badge">
							<image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
						</view>
					</view>
					<!-- 评论数据 -->
					<view class="comment_desc">
						<view class="comment_content"> {{ item.content }} </view>
						<view class="comment_like">
							<text class="iconfont icondianzan"> {{ item.size }} </text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热评结束 -->
		<!-- 最新评论开始 -->
		<view class="comment new" v-if="comment.length">
			<view class="comment_title">
				<text class="iconfont iconpinglun"></text>
				<text class="comment_text">最新评论</text>
			</view>
			<view class="comment_list">
				<view class="comment_item" v-for="item in comment" :key="item.id">
					<!-- 用户信息 -->
					<view class="comment_user">
						<!-- 头像 -->
						<view class="user_icon">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
						<!-- 名称 -->
						<view class="user_name">
							<view class="user_nickname"> {{ item.user.name }} </view>
							<view class="user_time"> {{ item.cnTime }} </view>
						</view>
						<!-- 徽章 -->
						<view class="user_badge">
							<image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
						</view>
					</view>
					<!-- 评论数据 -->
					<view class="comment_desc">
						<view class="comment_content"> {{ item.content }} </view>
						<view class="comment_like">
							<text class="iconfont icondianzan"> {{ item.size }} </text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 最新评论结束 -->

		<!-- 下载图片开始 -->
		<view class="download">
			<view class="download_btn" @click="handleDownload">下载图片</view>
		</view>
		<!-- 下载图片结束 -->

	</view>
</template>

<script>
	import moment from "moment"
	import swiperAction from "@/components/swiperAction.vue"
	// 将时间格式转为中文的格式
	moment.locale("zh-cn")

	export default {
		components: {
			swiperAction
		},
		data() {
			return {
				// 图片信息对象,包含着用户头像
				imgDetail: {},
				// 专辑数组
				album: [],
				// 最热评论
				hot: [],
				// 最新评论
				comment: [],
				// 图片的索引
				imgIndex: 0

			}
		},
		onLoad() {
			console.log('huancun', getApp().globalData)
			const {
				imgIndex
			} = getApp().globalData
			// 将解构出来的图片索引赋值给全局的图片索引
			this.imgIndex = imgIndex

			this.getData()


		},
		methods: {
			getData() {
				const {
					imgList
				} = getApp().globalData
				this.imgDetail = imgList[this.imgIndex]
				this.imgDetail.newThumb = this.imgDetail.thumb + this.imgDetail.rule.replace('$<Height>', 360)
				// 将时间戳设置xxx年前的格式，注意:moment(接收的是毫秒)
				this.imgDetail.cnTime = moment(this.imgDetail.atime * 1000).fromNow()
				this.getComments(this.imgDetail.id)
			},
			// 获取最新评论
			getComments(id) {
				this.request({
					url: `http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
				}).then(result => {
					console.log('result', result);
					this.album = result.res.album

					this.comment = result.res.comment
					result.res.comment.forEach(v => v.cnTime = moment(v.atime * 1000).fromNow())
					// 给hot数组中的对象添加一个时间属性
					result.res.hot.forEach(v => v.cnTime = moment(v.atime * 1000).fromNow())
					this.hot = result.res.hot
				})
			},
			// 滑动翻页
			handleSwiperAction(e) {
				/* 
					1.左滑 imgIndex++
					2.右滑 imgIndex--
					3.判断数组是否越界问题！！
					4.左滑 e.direction === 'left' && this.imgIndex<imgList.length-1
					5.右滑 e.directfion === 'right' && this.imgIndex>0
				 */
				const {
					imgList
				} = getApp().globalData
				if (e.direction === 'left' && this.imgIndex < imgList.length - 1) {
					// 可以左滑加载下一页
					this.imgIndex++
					// 重新发送请求给页面赋值
					this.getData()
				} else if (e.direction === 'right' && this.imgIndex > 0) {
					// 可以右滑加载上一页
					this.imgIndex--
					this.getData()
				} else {
					uni.showToast({
						title: '没有数据了',
						icon: 'none'
					})
				}
			},
			// 下载图片
			async handleDownload() {
				
				// 下载过程中提示下载中
				await uni.showLoading({
					title:"下载中",
					
				})
				
				// 1.将远程文件下载到小程序内存中,tempFilePath
				const result1 = await uni.downloadFile({url: this.imgDetail.img})
				const {tempFilePath} = result1[1]
					
				// 2.将小程序内存中的临时文件下载到本地上
				const result2 = await uni.saveImageToPhotosAlbum({
					filePath:tempFilePath
				})
				
				// 隐藏下载中的提示
				uni.hideLoading()
				// 3.提示用户下载成功
				await uni.showToast({
					title:'下载成功',
					icon:'success'
				})
			}


		}
	}
</script>

<style lang="scss">
	// 用户信息
	.user_info {
		display: flex;
		padding: 20rpx;

		.user_icon {
			padding: 0 20rpx;

			image {
				width: 88rpx;
				border-radius: 50%;
			}
		}

		.user_desc {
			.user_name {
				color: #000;
				font-weight: 600;
			}

			.user_time {
				color: #ccc;
				font-size: 24rpx;
				padding: 10rpx 0;
			}
		}
	}

	// 高清大图
	.high_img {
		image {
			border-bottom: 1rpx solid #eee;
		}
	}

	// 用户点赞
	.user_rank {
		height: 88rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 5rpx solid #eee;

		.rank {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.user_collect {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	// 专辑
	.album_wrap {
		padding: 20rpx;

		.album_title {
			padding: 10rpx 0;
		}

		.album_list {
			.album_item {
				display: flex;
				padding: 10rpx 0;
				border-bottom: 10rpx solid #eee;

				.album_cover {
					flex: 1;

					image {
						width: 180rpx;
						height: 180rpx;
					}
				}

				.album_info {
					flex: 3;
					padding-left: 20rpx;
					position: relative;

					.album_info_text {
						width: 100rpx;
						height: 50rpx;
						background-color: $color;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.album_name {
						padding: 10rpx 0;
						color: #888;
					}

					.iconfont {
						font-size: 40rpx;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 10%;
						color: #000;
					}
				}
			}
		}
	}

	// 热评
	.comment {
		.comment_title {
			padding: 15rpx;

			.iconfont {
				color: red;
				font-size: 40rpx;
			}

			.comment_text {
				font-weight: 600;
				font-size: 28rpx;
				color: #666;
				margin-left: 10rpx;
			}
		}

		.comment_list {
			.comment_item {
				border-bottom: 15rpx solid #eee;

				.comment_user {
					display: flex;
					padding: 20rpx 0;

					.user_icon {
						width: 15%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 90%;
						}
					}

					.user_name {
						flex: 1;

						.user_nickname {
							color: #777;
						}

						.user_time {
							color: #ccc;
							font-size: 24rpx;
							padding: 5rpx;
						}
					}

					.user_badge {
						image {
							display: inline-block;
							margin-right: 10rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.comment_desc {
					display: flex;
					padding: 30rpx 0;

					.comment_content {
						flex: 1;
						padding-left: 15%;
						color: #000;
					}

					.comment_like {
						text-align: right;

						.iconfont {}
					}
				}
			}
		}
	}

	// 新评
	.new {
		.iconpinglun {
			color: aqua !important;
		}
	}

	// 下载图片
	.download {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;

		.download_btn {
			width: 90%;
			height: 80%;
			background-color: $color;
			color: #fff;
			font-size: 35rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
